import {
  ProCard,
  ProFormList,
  ProFormSwitch,
  ProFormText,
} from '@ant-design/pro-components';
import { ReactNode } from 'react';

export const BaseConfig: React.FC<{ children?: ReactNode }> = ({
  children,
}) => {
  return (
    <>
      <ProFormText name="label" label="文本标题(label)" />
      <ProFormText name="field" label="字段名称(field)" />
      {children}
      <ProFormList
        name="rules"
        label="规则(rules)"
        creatorButtonProps={{
          creatorButtonText: '添加规则',
        }}
        itemRender={({ listDom, action }, { record }) => {
          return (
            <ProCard
              bordered
              extra={action}
              title={record?.field}
              style={{
                marginBlockEnd: 8,
              }}
            >
              {listDom}
            </ProCard>
          );
        }}
      >
        <ProFormSwitch name={'required'} label="必填(required)" />
        <ProFormText name={'message'} label="提示信息(message)" />
      </ProFormList>
    </>
  );
};
